<template>

	<div>
		<div class="mine">
			<div class="jian"><span class="iconfont icon-zuojiantou"></span></div>
			<i id="gg">个人中心</i>
			<div class="jian"><span class="iconfont icon-iconfontzhizuobiaozhun0257"></span></div>
		</div>
		<div class="qqq">
			<div class="www">
				<div class="xiang"></div>
				<div class="zi">
					<p>15239331032</p>
					<i>查看并编辑个人资料</i>
				</div>
			</div>
		</div>
		<div class="ding">
			<div class="bao">
				<div class="wei">
					<p>0</p>
					<i>未付订单</i>
				</div>
				<div class="yi">
					<p>0</p>
					<i>已付订单</i>
				</div>
			</div>
		</div>
		<div class="cc">
			<div class="c">
				<p>魅力社</p>
				<i>▶</i>
			</div>
		</div>
		<div class="cc">
			<div class="c">
				<p>我的优惠券</p>
				<i><span>14张优惠券</span>▶</i>
			</div>
		</div>
		<div class="cc">
			<div class="c">
				<p>我的地址</p>
				<i>▶</i>
			</div>
		</div>
		<div class="cc">
			<div class="c">
				<p>联系我们</p>
				<i>▶</i>
			</div>
		</div>
		<div class="tui">
			<div  @click="tellUs" class="chu">
				<p>退出登录</p>
				<i>▶</i>
			</div>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import { Dialog } from 'vant';
	import axios from "axios"
	// 全局注册
	Vue.use(Dialog);
	export default{
		methods: {
			tellUs(){
				Dialog.confirm({
				  message: '确定要退出吗？'
				}).then(() => {
          localStorage.removeItem("username")
          localStorage.removeItem("token")
				  this.$router.replace("/index")
				}).catch(()=>{
				});
			}

		}
	}
</script>
<style>
	.mine {
		width: 3.75rem;
		height: 0.44rem;
		display: flex;
		justify-content: space-around;
	}

	.jian {
		width: 0.51rem;
		height: 0.44rem;
		text-align: center;
		line-height: 0.44rem;
	}

	.jian span {
		font-size: 0.3rem;
	}

	#gg {
		width: 2.65rem;
		height: 0.44rem;
		text-align: center;
		line-height: 0.44rem;
		font-size: 0.2rem;
		font-weight: 600;
		color: #000000;
	}

	.qqq {
		width: 3.75rem;
		height: 0.92rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.www {
		width: 3.25rem;
		height: 0.9rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2px solid #000000;
		border-right: 1px solid #ccc;
	}

	.xiang {
		width: 0.6rem;
		height: 0.6rem;
		background: #ccc;
		border-radius: 50%;
	}

	.zi {
		width: 2.4rem;
		height: 0.6rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.zi p {
		font-size: 0.2rem;
		font-weight: 600;
		color: #000000;
	}

	.zi i {
		color: #999;
		font-size: 0.12rem;
	}

	.ding {
		width: 3.75rem;
		height: 1rem;
		display: flex;
		justify-content: center;
	}

	.bao {
		width: 3.25rem;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		border-bottom: 2px solid #000000;
	}

	.wei {
		width: 1.62rem;
		height: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-right: 1px solid #f5f5f5;
	}

	.wei p {
		font-size: 0.15rem;
		color: #000000;
		font-weight: 600;
	}

	.wei i {
		font-size: 0.16rem;
		color: #000000;
	}

	.yi {
		width: 1.62rem;
		height: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.yi p {
		font-size: 0.15rem;
		color: #000000;
		font-weight: 600;
	}

	.yi i {
		font-size: 0.16rem;
		color: #000000;
	}

	.cc {
		width: 3.75rem;
		height: 0.74rem;
		display: flex;
		justify-content: center;
	}

	.c {
		width: 3.25rem;
		height: 0.74rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.c p {
		font-size: 0.18rem;
		color: #000000;
	}

	.c i {
		font-size: 0.03rem;
		color: #888;
	}

	.c span {
		font-size: 0.14rem;
	}

	.tui {
		width: 3.75rem;
		height: 0.74rem;
		display: flex;
		justify-content: center;
	}

	.chu {
		width: 3.25rem;
		height: 0.74rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.chu p {
		font-size: 0.18rem;
		color: #000000;
	}

	.chu i {
		font-size: 0.03rem;
		color: #888;
	}
</style>
